<template>
  <div class="meeting">
    <van-nav-bar
      :title="MeetingData.name"
      left-arrow
      :safe-area-inset-top="true"
      :right-text="(number === MeetingData.userNumber && MeetingData.meetingStatus !== 1 && MeetingData.meetingStatus !== 5 && MeetingData.meetingStatus !== 6) ? '结束' : ''"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="meeting-body">
      <div class="meeting-body-box" @touchstart="handleTouchstart" @touchend="handleTouchend" :style="{left: boxLeft + 'vw'}">
        <div class="item member">
          <MemberList :meetingId="id" @replayHandle="replayHandle" @goAgainGetNotice="goAgainGetNotice" :meetingInfo="MeetingData" :MeetingNoticeData="MeetingNoticeData" />
        </div>
        <div class="item home">
          <MeetingHome :MeetingData="MeetingData" :MeetingNoticeData="MeetingNoticeData" @goAgainGetMeetingData="goAgainGetMeetingData" />
        </div>
        <div class="item holiday">
          <HolidayApproval :meetingId="id" v-if="number === MeetingData.userNumber" />
          <ApplyHoliday :meetingId="id" :meetingName="MeetingData.name" v-else />
        </div>
      </div>
    </div>
    <BottomNavBar
      :meetingInfo="MeetingData"
      :boxLeft="boxLeft"
      @memberView="memberView"
      @holidayApproval="holidayApproval"
      @applyHoliday="applyHoliday"
      @goMeetingHome="goMeetingHome"
    ></BottomNavBar>
  </div>
</template>

<script>
import { onMounted, reactive, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { getCmsMeetingById } from '@/api/home/meetingDetail.js'
import { endMeeting, getCmsNotice } from '@/api/meeting/meeting.js'
import BottomNavBar from '@/components/NavBar/BottomNavBar.vue'
import { Notify, Dialog } from 'vant'
import ApplyHoliday from "./components/ApplyHoliday.vue"
import HolidayApproval from './components/HolidayApproval.vue'
import MemberList from './components/MemberList.vue'
import MeetingHome from './components/MeetingHome.vue'
export default {
  name: 'Meeting',
  components: { BottomNavBar, ApplyHoliday, HolidayApproval, MemberList, MeetingHome },
  setup() {
    const route = useRoute()

    const store = useStore()

    const id = route.query.id
    const type = route.query.type

    let MeetingData = reactive({})

    let MeetingNoticeData = ref([])

    const number = computed(() => store.getters.getUserNumber)

    // 位置
    let boxLeft = ref(-100)

    onMounted(() => {
      getMeetingDetail()

      // 判断是否是从消息页面跳转过来的，是则到请假页面
      if (type === '0') boxLeft.value = -200
    })

    // 根据会议 id 获取会议详情
    async function getMeetingDetail() {
      const res = await getCmsMeetingById({ id })
      MeetingData = Object.assign(MeetingData, res.data.data)
      console.log(MeetingData)
      // 获取到会议详情后再获取会议考勤
      getMeetingNotice()
    }

    // 根据会议 id 获取会议考勤
    async function getMeetingNotice() {
      const res = await getCmsNotice({ meetingId: id })
      console.log(res)
      if (res.data.code !== 200) return

      res.data.data.records.sort((a, b) => a.signInStatus - b.signInStatus)

      MeetingNoticeData.value = res.data.data.records
    }

    // 重新获取会议详情
    function goAgainGetMeetingData() {
      getMeetingDetail()
    }

    // 重新获取考勤列表
    function goAgainGetNotice() {
      getMeetingNotice()
    }

    // 成员点击处理函数
    function memberView() {
      boxLeft.value = 0
    }

    // 请假审批处理函数
    function holidayApproval() {
      boxLeft.value = -200
      // router.push({
      //   path: '/holidayapproval',
      //   query: {
      //     meetingId: MeetingData.id,
      //   },
      // })
    }

    // 请假处理函数
    function applyHoliday() {
      boxLeft.value = -200
      // router.push({
      //   path: '/applyholiday',
      //   query: {
      //     meetingId: MeetingData.id,
      //     meetingName: MeetingData.name,
      //   },
      // })
    }

    // 会议首页
    function goMeetingHome() {
      boxLeft.value = -100
    }

    // 导航右侧按钮
    function onClickRight() {
      Dialog.confirm({
        title: '警告',
        message:
          '您确定要提前结束会议吗？',
      }).then(async () => {
        const fd = new FormData()
        fd.append("meetingId", id)
        const res = await endMeeting(fd)  
        if (res.data.code === 400) {
          Notify({
            type: 'warning',
            duration: 1000,
            message: res.data.message,
          })
          return
        }
        Notify({
          type: 'success',
          duration: 1000,
          message: "成功结束会议，开始签退",
        })
        getMeetingDetail()
      }).catch(() => {

      })
    }

    let touchPosition = ref(0)

    // 手指放上屏幕
    function handleTouchstart(e) {
      // console.log(e)
      touchPosition.value = e.changedTouches[0].clientX
    }

    // 手指离开屏幕
    function handleTouchend(e) {
      const leavePosition = e.changedTouches[0].clientX
      // console.log(leavePosition - touchPosition.value)

      if ((leavePosition - touchPosition.value) >= 60) {
        if (boxLeft.value === 0) return
        else boxLeft.value += 100
      } else if ((leavePosition - touchPosition.value) <= -60) {
        console.log(boxLeft.value)
        if (boxLeft.value === -200) return
        else boxLeft.value -= 100
      }
      // boxLeft.value = -e.changedTouches[0].clientX
    }

    // 刷新
    function replayHandle() {
      getMeetingNotice()
    }

    const onClickLeft = () => history.back()

    return {
      number,
      boxLeft,
      id,
      MeetingData,
      MeetingNoticeData,
      memberView,
      holidayApproval,
      applyHoliday,
      onClickLeft,
      goMeetingHome,
      onClickRight,
      goAgainGetMeetingData,
      goAgainGetNotice,
      handleTouchstart,
      handleTouchend,
      replayHandle
    }
  },
}
</script>

<style lang="scss" scoped>
.meeting {
  width: 100%;
  height: 100vh;
  background-color: var(--global-bg);

  .meeting-body {
    width: 100%;
    height: calc(100vh - var(--van-nav-bar-height));
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    &-box {
      width: 300vw;
      height: 100%;
      top: 0;
      left: -100vw;
      position: absolute;
      display: flex;
      transition: all 0.5s;

      .item {
        width: 100vw;
        height: 100%;
      }

      .member {

        &-box {
          width: 100%;
          height: 100%;

          &-item {
            width: 100%;
            height: 5rem;
            background-color: orange;
          }
        }
      }
      .home {
     
      }
      .holiday {
      
      }
    }

    span {
      margin-top: 2rem;
    }
  }
}
</style>